<template>
	<div class="main">
		<!--顶部栏-->
		<el-header class="header_home" style="height: 50px;">
			<div class="home_logo">
				<!-- <i class="el-icon-picture-outline" v-if="isCollapse"></i> -->
				<!--<p class="company_name">{{ $store.state.Basis.SYSTEM_NAME }}</p>-->
				<div class="company_name">
					<img src="../assets/img/logo.png" style="width: 40px;height: 40px; margin-right:5px;"> 				水系连通 水美乡村</div>
				

			</div>
			<!-- <div class="menu_switch">
        <i class="fa fa-bars menu_icon"
          v-if="false"
          aria-hidden="true"
          @click="isCollapse = !isCollapse">
        </i>
      </div> -->
			<div class="header_action_bar">
				<div class="children_bar">
					<el-badge :value="newnum" class="item" style="margin-right: 20px;">
						<!-- <i class="fa fa-comment-dots" style="color: #fff;font-size: 25px;" @click="tonews()"></i> -->

					</el-badge>
					<!-- 	<span style="color: #fff;" @click="cs">测试</span> -->
					<el-dropdown trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							{{ userName }}<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item class="clearfix" command="personal" v-if="userInfo.data.name!='admin'">
								修改手机号
							</el-dropdown-item>
							<el-dropdown-item class="clearfix" command="password">
								修改密码
							</el-dropdown-item>
							<el-dropdown-item class="clearfix" command="forgetpass"  v-if="userInfo.data.name!='admin'">
								忘记密码
							</el-dropdown-item>
							<el-dropdown-item class="clearfix" command="quit">
								退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<!--头像-->
				<!--<div class="children_bar">-->
				<!--<div class="avatar">-->
				<!--<img src="../assets/img/touxiang.jpeg" alt="">-->
				<!--</div>-->
				<!--</div>-->
			</div>
		</el-header>
		<div class="main_bodys">
			<div class="menu">
				<menu-bar :isCollapse="!isCollapse"></menu-bar>
			</div>
			<el-main>
				<!--面包屑-->
				<!-- <bread-crumbs-bar></bread-crumbs-bar> -->
				<!--二级路由入口-->
				<router-view></router-view>
				<!-- <div class="website_info">网站版权信息</div> -->
			</el-main>
		</div>
		<!--修改密码-->
		<el-dialog title="修改个人信息" width="30%" :visible.sync="dialogFormVisible">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="form.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="角色" :label-width="formLabelWidth">
					<el-input
						v-model="form.role_name=='admin'?'超级管理员':form.role_name=='school'?'管理员':form.role_name=='teacher'?'老师':form.role_name=='student'?'学生':''"
						disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth">
					<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="新密码" :label-width="formLabelWidth">
					<el-input v-model="form.password" placeholder="请输入新密码，不填默认旧密码"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelUserInfo">取 消</el-button>
				<el-button type="primary" @click="setUserInfo">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		Message
	} from 'element-ui'
	// 菜单
	import menuBar from '@/components/common/menu/menu'
	// 面包屑
	import breadCrumbsBar from '@/components/common/breadCrumbs/breadCrumbs'

	export default {
		components: {
			menuBar,
			breadCrumbsBar,
		},
		data() {
			return {
				// 用户名称
				userName: '东海的浪啊',
				userInfo: JSON.parse(localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)),
				// 菜单折叠
				isCollapse: true,
				// 菜单列表
				menuList: [],
				// 默认选中的菜单
				defaultActive: '',
				color1: '#409EFF',
				//修改密码
				dialogFormVisible: false,
				form: {
					uid: -1,
					username: '', //用户名
					role_name: '', //角色
					name: '', //姓名
					password: '', //密码
				},
				formLabelWidth: '120px'
			}
		},
		created() {
			// 获取菜单列表
			this.getMenuList()
			// 从本地查找默认选中菜单
			this.defaultActive = sessionStorage.getItem(this.$apis.getLocalKey().menuActive)
			// 用户名称赋值
			this.userName = JSON.parse(sessionStorage.getItem(this.$apis.getLocalKey().user)).data.user_name
		},
		mounted() {

		},
		computed: {
			newnum() {
				// if(localStorage.getItem('newsnum')){
				return this.$parent.newnum
				// }
			}

		},
		methods: {
			// 获取菜单列表
			getMenuList() {
				// 获取路由列表
				const routerList = this.$router.options.routes
				// 列表赋值
				this.menuList = routerList
			},
			// 激活菜单
			handleSelect(index, path) {
				// 将当前点击的菜单项 存放进本地
				sessionStorage.setItem(this.$apis.getLocalKey().menuActive, index)
			},
			handleCommand(command) {
				if (command == 'quit') {
					//退出登录
					this.$router.push({
						'path': '/login'
					})
					sessionStorage.removeItem("token");
					// 将当前激活的菜单 id 存入本地
					sessionStorage.setItem(this.$apis.getLocalKey().menuIndex, '0')
					sessionStorage.setItem(this.$apis.getLocalKey().user, '')
					// sessionStorage.setItem(this.$apis.getLocalKey().menuIndex, 0)
					//  this.$apis.logout().then((res) => {
					//   this.$router.push({'path': '/login'});
					//   localStorage.removeItem(this.$apis.getLocalKey().loginPersonnelInformation);
					//   sessionStorage.removeItem(this.$apis.getLocalKey().user);
					// });
				} else if (command == 'password') {
					//修改密码
					// this.form.password = ''
					// this.dialogFormVisible = true
					this.$router.push({
						'path': '/change-password'
					})
					
				} else if (command == 'personal') {
					//个人中心
					this.$router.push({
						'path': '/personal-center'
					})
				}else if(command =='forgetpass'){
					//个人中心
					this.$router.push({
						'path': '/forget-pass'
					})
				}
			},
			cancelUserInfo() {
				//清空
				this.form = {}
				this.dialogFormVisible = false
			},
			//修改密码
			setUserInfo() {
				if (this.form.name == '') {
					Message.warning('姓名不能为空')
					return
				}
				var datas = {
					uid: JSON.parse(localStorage.getItem('loginPersonnelInformation')).id,
					name: this.form.name,
					password: this.form.password
				}
				this.$apis.setUser(datas)
					.then((res) => {
						if (res.code == 1) {
							this.dialogFormVisible = false
							if (this.form.password != '') {
								this.$confirm('修改成功，请重新登录！', '提示', {
										showCancelButton: false,
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning'
									})
									.then(() => {
										this.handleCommand('quit')
									})
									.catch(() => {})
							} else {
								Message.success(res.msg)
							}
						} else {
							Message.error(res.msg)
						}
					})
			},
			tonews() {
				this.$router.push({
					path: '/sxgh/newsManage/newsManage',
				})


			},
			cs() {
				var datas = {
					user: 205,
					type: 205,
					type_id: 205,
					msg: 'consultant'
				}
				this.$apis.tttttt(datas)
					.then(res => {
						if (res.result == 0) {

						}
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-dropdown {
		color: #2d8cf0;
	}

	.header_home {
		width: 100%;
		height: $head_dom_height !important;
		padding: 0;
		box-shadow: 0 3px 1px 1px rgba(100, 100, 100, 0.1);
		position: relative;
		z-index: 1;
		/*background: url("http://img.mp.itc.cn/upload/20160606/be6cbff1b4dc4167996bc4b0bd644ce8_th.jpg");*/
		background-color: #283E51;
		background-size: 100%;
		background-position: 0 922px
	}

	.home_logo {
		box-sizing: border-box;
		// width: 180px;
		height: $head_dom_height;
		line-height: $head_dom_height;
		background-color: $background_menu;
		text-align: center;
		font-size: 16px;
		color: #fff;
		float: left;
	 //    display: flex;
		// align-items:center;

		.company_name {
			font-size: 18px;
			font-weight: bold;
			display: flex;
			align-items:center;
		}

		i,
		img {
			font-size: 20px;
			color: #fff;
		}
	}

	.menu_switch {
		width: 30px;
		height: $head_dom_height;
		line-height: $head_dom_height + 5;
		padding: 0 25px;
		float: left;

		.menu_icon {
			color: #fff;
			cursor: pointer;
		}

		i {
			font-size: 22px;
			cursor: pointer;
			color: #fff;
		}
	}

	.header_action_bar {
		height: $head_dom_height;
		float: right;
		padding: 0 30px;
		display: flex;
		align-items: center;

		.children_bar {
			font-size: 14px;
			padding: 0 15px;
			display: table-cell;
			position: relative;
			cursor: pointer;
		}
	}

	.menu {
		height: calc(100vh - 60px);
		float: left;
		background-color: $background_menu;
		position: relative;
		z-index: 2;
		overflow-y: scroll; //垂直滚动条
	}

	.el-main {
		padding: 0;
		height: calc(100vh - 60px);
		position: relative;
	}

	.avatar {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		background-color: red;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: -18px;
	}

	.avatar img {
		width: 100%;
		height: 100%;
	}
</style>
